var formPanel;
var mask;

Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

Ext.onReady(function()
{

    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    formPanel = new Ext.FormPanel({
        width: 300,
        split: true,
        frame:true,
        region: 'west',
        title: 'Input',
        autoScroll: true,
        bodyStyle:'padding:5px 5px 0',
        labelAlign: 'top',
        buttonAlign: 'center',

        items: [
            {
                xtype: 'textarea',
                fieldLabel: 'Input text',
                name: 'input',
                value: 'Considerando que la libertad, la justicia y la paz en el mundo tienen por base el reconocimiento de la dignidad intrinseca y de los derechos iguales e inalienables de todos los miembros de la familia humana.',
                anchor: '95%',
                height: 375
            },
            new Ext.form.ComboBox({
                fieldLabel: 'Language',
                store: [['ES', 'Spanish'],/*['FR','French'],['IT','Italian'],['PR','Portuguese'],*/['RO','Romanian']],
                mode: 'local',
                triggerAction: 'all',
                //            value: 'ES',
                allowBlank: false,
                emptyText: 'Choose language...',
                editable: false,
                hiddenName : 'lang',
                width: 175
            }),
            {
                xtype: 'checkbox',
                hideLabel: true,
                inputValue: true,
                name: 'hyphenate',
                boxLabel: 'Hyphenate'
            }
        ],

        buttons: [{
            text: 'Submit',
            handler: submitHandler
        }]
    });

    new Ext.Viewport({
        layout: 'border',
        split: true,
        height: 600,
        items: [
            formPanel,
            {
                title: 'Phonetical transcription',
                id: 'result-pane',
                region: 'center',
                style: 'padding:0',
                bodyStyle: 'background-color:white;font-family:"lucida sans unicode";font-size:18px;padding:5px;',
                frame: true,
                split: true,
                autoScroll: true
            },
            {
                title: 'Project information',
                width: 260,
                region: 'east',
                contentEl: 'about',
                autoShow: true,
                margins: '0 0 0 5',
                frame: true,
                autoScroll: true
            },
            {
                region: 'north',
                height: 39,
                contentEl: 'header',
                autoShow: true
            }]

    })

});


function submitHandler()
{
    if ( formPanel.getForm().isValid() )
    {
        mask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
        mask.show();

        formPanel.getForm().submit({
            url:'process.jsp',
            method: 'POST',
            success: onSuccess,
            failure: onFailure,
            clientValidation: true
        });
    }
}

function onSuccess( form, action )
{
    mask.hide();
    Ext.getCmp("result-pane").body.update(action.result.result);
}

function onFailure( form, action )
{
    mask.hide();
    Ext.getCmp("result-pane").body.update("");

}
